<template>
	<view>
		<view class="top">
			<u-search style="flex:1" placeholder="请输入要搜索的商品" :show-action="false"></u-search>
			<u-icon name="account-fill" class="center"></u-icon>
		</view>
		<u-tabs :list="list" :current="current" @change="change" bg-color="#FF0000" inactive-color="#fff"
			active-color="#fff"></u-tabs>
			
		<view v-if="current === 0">
			<view class="wrap">
				<u-swiper height="260" border-radius="10" :list="images"></u-swiper>
			</view>
			<view class="enchong">
				<view class="home-category">
					<view class="category_item" v-for="item in typeList" bg-color="transparent" :key="item.name">
						<img :src="item.image" class="image"></img>
						<view class="grid-text">{{ item.navigation_name }}</view>
					</view>
				</view>
			</view>
			<!-- 限时抢购 -->
			<!-- 		<view class="block-view">
						<view class="block-header">
							<view class="header-title">
								<view class="xianshi"><text>限时抢购</text></view>
								<view class="seckill-times">
									<text class="seckill-nth">倒计时</text>
									<text v-if="xianshiList[0]" class="seckill-time">
										<u-count-down font-size="23" separator-size="23" separator-color="#ff0000" color="#ff0000"
											:timestamp="daojishi"></u-count-down>
									</text>
								</view>
							</view>
							<view class="more-text">更多商品<u-icon name="arrow-right" color="grey" size="28"></u-icon>
							</view>
						</view>
						<view class="goods-list-view">
							<view class="goods-item">
								<image class="image"
									src="http://javashop-statics.oss-cn-beijing.aliyuncs.com/demo/D1B978237E5D4EE9969A479CB573D5DD.jpg_300x300"
									mode=""></image>
								<view>
									<text style="color: rgb(250, 53, 52); font-size: 11px; font-weight: 600;">￥</text>
									<text style="color: rgb(250, 53, 52); font-size: 16px; font-weight: 600;">66</text>
									<text style="color: rgb(250, 53, 52); font-size: 11px; font-weight: 600;">.00</text>
								</view>
								<view class="original-price">￥43</view>
							</view>
						</view>
					</view> -->
			<view class="floor-container">
				<view style="display: flex" v-for="(item, i) in home_content" :key="item['tpl_id'] + '' + i"
					:class="'item-' + item['tpl_id']">
					<view v-for="v in item['blockList']" :key="
					              v['block_type'] === 'IMAGE'
					                ? v['block_value']
					                : v['block_value']['goods_image']
					            ">
						<img :src="
					                v['block_type'] === 'IMAGE'
					                  ? v['block_value']
					                  : v['block_value']['goods_image']
					              " />
						<view v-if="v['block_type'] !== 'IMAGE'">
							<p>{{ v["block_value"]["goods_name"] }}</p>
							<span class="price">
								<span>￥</span>
								<span>{{
					                  v["block_value"]["goods_price"]
					                    .toFixed(2)
					                    .toString()
					                    .split(".")[0]
					                }}</span>
								<span>.{{
					                    v["block_value"]["goods_price"]
					                      .toFixed(2)
					                      .toString()
					                      .split(".")[1]
					                  }}</span>
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<typeList ref="lis" v-else :category_id="category_id" @fuqin="gai"></typeList>
	</view>
</template>

<script>
	import typeList from "./TypeList.vue"
	export default {
		components: {
			typeList
		},
		data() {
			return {
				list: [],
				images: [],
				typeList: [],
				current: 0,
				xianshiList: [],
				daojishi: 0,
				home_content: [],
				category_id: 0,
			}
		},
		// 触底事件
		onReachBottom() {
			this.$refs.lis.daodi();
		},
		onLoad() {
			// nav导航栏的请求
			uni.request({
				url: "https://api.javamall.com.cn/buyer/goods/categories/0/children",
			}).then(data => {
				this.list = [{
					name: "首页"
				}, ...data[1].data];
			});
			// 轮播图
			uni.request({
				url: "https://api.javamall.com.cn/buyer/focus-pictures?client_type=WAP"
			}).then(data => {
				this.images = data[1].data.map(item => {
					return {
						image: item.pic_url
					};
				});
			});
			// 底下的分类
			uni.request({
				url: "https://api.javamall.com.cn/buyer/pages/site-navigations?client_type=MOBILE"
			}).then(data => {
				this.typeList = data[1].data;
			});
			// 限时抢购的商品 
			uni.request({
				url: "https://api.javamall.com.cn/buyer/promotions/seckill/goods-list?range_time=11"
			}).then(data => {
				this.xianshiList = data[1].data.data;
				// 获取今天的最后一刻
				let en = new Date();
				en.setHours(23);
				en.setSeconds(59);
				en.setMinutes(59)
				this.daojishi = Math.round(en.getTime() / 1000) - Math.round(new Date().getTime() / 1000);
			});
			// 获取底部
			uni.request({
				url: "https://api.javamall.com.cn/buyer/pages/WAP/INDEX"
			}).then(data => {
				this.home_content = JSON.parse(data[1].data.page_data);
				console.log(this.home_content);
			});
		},
		methods: {
			change(index) {
				this.current = index;
				if(index === 0) return;
				this.category_id = this.list[index].category_id;
			},
			gai() {
				this.$refs.lis.list = [...this.$refs.lis.list];
			}
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: red;
	}

	.center {
		color: #fff;
		font-size: 50rpx;
	}

	.wrap {
		padding: 20rpx 40rpx 40rpx;
		height: 180rpx;
		background-color: #ff0000;
		border-bottom-left-radius: 40rpx 10rpx;
		border-bottom-right-radius: 40rpx 10rpx;
	}

	.u-swiper-wrap {
		overflow: hidden;
		border-radius: 30rpx !important;
	}

	.enchong {
		margin-top: 110rpx;
		padding: 0 20rpx 0;
		box-sizing: border-box;
	}

	.grid-text {
		margin-top: 10rpx;
		font-size: 20rpx;
	}

	.u-grid-item-box {
		padding-top: 10rpx !important;
		padding-bottom: 10rpx !important;
	}

	.block-view {
		background-color: #fff;
		margin: 5px 11px 11px 11px;
		border-radius: 5px;
		padding: 5px 8px;
	}

	.block-header {
		display: flex;
		font-size: 17px;
		padding: 11px 0px;
		justify-content: space-between;
		align-items: center;

		.more-text {
			color: #909399;
			font-size: 13px;
		}
	}

	.header-title {
		display: flex;
		align-items: center;

		.xianshi {
			font-weight: 600;
			font-size: 36rpx;
		}
	}

	.seckill-times {
		margin: 0 22rpx;
		font-size: 23rpx;
		box-sizing: border-box;

		.seckill-nth {
			font-weight: 600;
			color: #fff;
			padding: 4rpx 10rpx;
			border-top-left-radius: 32rpx;
			border-bottom-left-radius: 32rpx;
			background-color: #fa3534;
			border: 1rpx solid #fa3534;
		}

		.seckill-time {
			color: #fa3534;
			font-weight: 600;
			padding: 4rpx 10rpx;
			border-top-right-radius: 32rpx;
			border-bottom-right-radius: 32rpx;
			border: 1rpx solid #fa3534;
		}
	}

	.goods-list-view {
		overflow-y: scroll;

		.goods-item {
			width: 20%;
			display: inline-block;
			background: #fff;
			margin: 8rpx;
			border-radius: 10rpx;
			text-align: center;

			.image {
				width: 100%;
				height: 132rpx;
			}

			.original-price {
				color: #ababab;
				font-size: 24rpx;
				line-height: 26rpx;
				margin-bottom: 8px;
				padding: 0 4rpx;
				text-decoration: line-through;
			}
		}
	}

	.home-category {
		margin: 22rpx 32rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

		.category_item {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 20%;
			margin-top: 12rpx;

			.grid-text {
				margin-top: 20rpx;
				font-size: 24rpx;
			}

			.image {
				display: block;
				width: 70%;
				height: 95rpx;
				overflow: visible;
				opacity: 1;
				transition: opacity 0.5s ease-in-out 0s;
				background-color: transparent;
			}
		}
	}

	.floor-container {
		margin: 0.3125rem 0.625rem 0.625rem 0.625rem;
		border-radius: 0.3125rem;
		overflow: hidden;
	}

	.item-30 {
		border-bottom: 0.03125rem solid #ebebeb;

		view {
			height: 122rpx;
			width: 100%;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.item-38 {
		display: flex;
		justify-content: space-around;

		view {
			border: 0.0625rem solid rgba(0, 0, 0, 0.1);
			overflow: hidden;
			border-radius: 10rpx;
			width: 230rpx;
			margin: 0.3125rem 0;
			height: 232rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.item-25 {
		display: flex;
		height: 288rpx;
		flex-wrap: wrap;
		flex-direction: column;
		position: relative;

		view:first-child,
		view:nth-child(2) {
			height: 144rpx;
			width: 360rpx;
			border-bottom: 0.03125rem solid #ebebeb;
		}

		view:last-child {
			box-sizing: border-box;
			width: 380rpx;
			flex: 1;
			align-self: flex-end;
			justify-self: flex-start;
			border-left: 0.03125rem solid #ebebeb;
			border-bottom: 0.03125rem solid #ebebeb;
		}

		img {
			width: 100%;
			height: 100%;
		}
	}

	.item-29 {
		view {
			border-left: 0.03125rem solid #ebebeb;
			border-bottom: 0.03125rem solid #ebebeb;
			box-sizing: content-box;
			width: 25%;
			height: 232rpx;

			img {
				width: 100%;
				height: 100%;
				border-bottom: 0.03125rem solid #ebebeb;
			}

			img:first-child {
				border-left: none;
			}
		}
	}

	.item-26 {
		view {
			margin-top: 0.5rem;
			width: 33.3%;
			border-left: 1rpx solid #ebebeb;
			height: 264rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		view:first-child {
			border-left: none;
		}
	}

	.item-23 {
		view {
			height: 300rpx;
			width: 100%;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.item-23:nth-of-type(2) img {
		height: 9.25rem !important;
	}

	.item-32 {
		view {
			border-top: 0.03125rem solid #ebebeb;
			border-bottom: 0.03125rem solid #ebebeb;
			border-left: 0.03125rem solid #ebebeb;
			box-sizing: content-box;
			width: 25%;
			height: 280rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		view:first-child {
			width: 50%;
		}
	}

	.item-37 {
		justify-content: space-between;
		margin-bottom: 20rpx;

		view {
			display: flex;
			border-radius: 0.5rem;
			overflow: hidden;
			background-color: #fff;
			margin: 0.2rem 0;
			flex-wrap: wrap;
			align-content: space-between;
			width: 48%;
			box-sizing: content-box;
			padding-bottom: 0.1em;

			view {
				width: 100%;
				margin: 0.5rem;

				p {
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					width: 100%;
					font-size: 30rpx
				}

				.price {
					margin-top: 0.3rem;
					color: rgb(250, 53, 52);
					font-weight: 600;

					span:first-child {
						font-size: 24rpx;
					}

					span:nth-of-type(2) {
						font-size: 35rpx;
					}

					span:nth-of-type(3) {
						font-size: 24rpx;
					}
				}
			}

			img {
				width: 100%;
				height: 360rpx;
			}
		}
	}
</style>
